<template>
  <div class="app2">
    <div class="top"></div>
    <div class="yemian">
      <div class="icon">
        <div><van-icon name="success" size="50" color="white" /></div>
      </div>
      <p>订单支付成功</p>
      <div class="dingdan">
        <div>
          <span>订单编号</span>
          <span>{{bianhao}}</span>
        </div>
        <div>
          <span>下单时间</span>
          <span>{{time}}</span>
        </div>
        <div>
          <span>支付方式</span>
          <span>余额支付</span>
        </div>
        <div>
          <span>支付金额</span>
          <span>￥{{parseInt($route.query.price)>0?$route.query.price+'.00':$route.query.price}}</span>
        </div>
      </div>
      <div class="tui"><van-button type="danger" @click='run2'>查看订单</van-button></div>
      <div class="tui">
        <van-button type="danger" @click="run">回到首页</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "jiesuan",
  data() {
    return {
      date: null,
      dinggdan:null,
      bianhao:null,
      tie:null
    };
  },
  created() {
    // this.$http.get('http://47.115.51.185/api/order/').then(d=>{
    //     console.log(d)
    // })
    console.log(this.$route.query.dingdan)
    this.dingdan=JSON.parse(this.$route.query.dingdan).data.data;
    console.log(this.dingdan)
    this.bianhao=this.dingdan.order_id;
    this.tie=this.dingdan._add_time;

  },
  methods: {
    run() {
      this.$router.push("/");
    },
    run2(){
       this.$router.push({
         path:'/xiangqing',
         query:{
           xiang:this.bianhao
         }
       });
    }
  },
  computed: {
    time: function () {
      var date = new Date();
      //年
      var year = date.getFullYear();
      //月
      var month = date.getMonth() + 1;
      //日
      var day = date.getDate();
      //时
      var hh = date.getHours();
      //分
      var mm = date.getMinutes();
      mm>10?mm:'0'+mm
      //秒
      var ss = date.getSeconds();
      ss>10?ss:'0'+ss
      var rq =
        year + "-" + month + "-" + day + '    ' + hh + ":" + mm + ":" + ss;
        return rq;
      
    },
  },
};
</script>
<style lang="less" scoped>
.app2 {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
}
.top {
  padding-top: 20vh;
  background-color: #f5f5f5;
}
.yemian {
  width: 90vw;
  //   height: 60vh;
  margin-left: 5vw;
  background-color: white;
  position: relative;
  .icon {
    // text-align: center;
    height: 7vh;
    div {
      width: 20vw;
      height: 10vh;
      background-color: red;
      border-radius: 50%;
      text-align: center;
      position: absolute;
      top: -5vh;
      left: 40%;
    }
    .van-icon {
      padding: 8px 15px;
    }
  }
  p {
    text-align: center;
    font-size: 17px;
    font-weight: 550;
  }
  .dingdan {
    padding: 3vh 5vw;
    border: 1px solid #eee;
    div {
      display: flex;
      justify-content: space-between;
      padding: 1vh 0vw;
    }
  }
  .tui {
    text-align: center;
    padding: 2vh 0px;
    .van-button {
      width: 70vw;
      border-radius: 40px;
    }
  }
}
</style>